<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>SSE-Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <META http-equiv="Pragma" content="no-cache">
    <META http-equiv="Cache-Control" content="no-cache">
    <META http-equiv="Expire" content="0">

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"/>
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
SSE-Demo

<div id="message">
    //这里展示信息
</div>

<script type="text/javascript">
    $(function () {
        if (window.EventSource) { //判断浏览器是否支持SSE
            var openurl = "[[@{/orderpay(payid=1)}]]";
            var overurl = "[[@{/over(payid=1)}]]";
            //第2步，主动进行建立长连接，表明用户已经发起支付
            let source = new EventSource(openurl);
            let innerHTML = '';

            //监听服务器端发来的事件：open
            source.onopen = function (e) {
                innerHTML += "onopen：准备就绪，可以开始接收服务器数据" + "<br/>"; //支付结果
                $("#message").html(innerHTML);
            };
            //监听服务器端发来的事件：message
            source.onmessage = function (e) {
                // alert(typeof e.data);
                innerHTML += "onmessage:" + e.data + "<br/>"; //支付结果
                $("#message").html(innerHTML);
            };
            //自定义finish事件，主动关闭EventSource
            source.addEventListener('finish', function (e) {
                //此时只是断开了客户端的连接，服务端的连接还没有释放
                source.close();
                innerHTML += "支付结果接收完毕，通知服务端关闭EventSource" + e.data + "<br/>";
                $("#message").html(innerHTML);
                //ajax异步调用，通知服务端关闭EventSource
                $.getJSON(overurl,function(result){
                    innerHTML += "服务端关闭EventSource完成！" + result.over + "<br/>";
                    $("#message").html(innerHTML);
                });
            }, false);
            //监听服务器端发来的事件：error
            source.onerror = function (e) {
                // 0：相当于常量EventSource.CONNECTING，表示连接还未建立，或者断线正在重连。
                // 1：相当于常量EventSource.OPEN，表示连接已经建立，可以接受数据。
                // 2：相当于常量EventSource.CLOSED，表示连接已断，且不会重连。
                if (e.readyState === EventSource.CLOSED) {
                    innerHTML += "sse连接已关闭" + "<br/>";
                    $("#message").html(innerHTML);
                } else {
                    console.log(e);
                }
            };
        } else {
            console.log("你的浏览器不支持SSE");
        }
    });
</script>
</body>
</html>